<!DOCTYPE html>
<html lang="" xml:lang="">
<head>

  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Chapter 22 Image Classifier | JavaScript for R</title>
  <meta name="description" content="Invite JavaScript into your Data Science workflow." />
  <meta name="generator" content="bookdown 0.20 and GitBook 2.6.7" />

  <meta property="og:title" content="Chapter 22 Image Classifier | JavaScript for R" />
  <meta property="og:type" content="book" />
  
  
  <meta property="og:description" content="Invite JavaScript into your Data Science workflow." />
  <meta name="github-repo" content="JohnCoene/javascript-for-r" />

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="Chapter 22 Image Classifier | JavaScript for R" />
  
  <meta name="twitter:description" content="Invite JavaScript into your Data Science workflow." />
  

<meta name="author" content="John Coene" />


<meta name="date" content="2020-09-04" />

  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  
  
<link rel="prev" href="exercise-machine-learning.html"/>
<link rel="next" href="progress-bar.html"/>
<script src="libs/header-attrs/header-attrs.js"></script>
<script src="libs/jquery/jquery.min.js"></script>
<link href="libs/gitbook/css/style.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-table.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-bookdown.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-highlight.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-search.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-fontsettings.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-clipboard.css" rel="stylesheet" />









<script src="libs/accessible-code-block/empty-anchor.js"></script>
<script src="libs/htmlwidgets/htmlwidgets.js"></script>
<script src="libs/plotly-binding/plotly.js"></script>
<script src="libs/typedarray/typedarray.min.js"></script>
<link href="libs/crosstalk/css/crosstalk.css" rel="stylesheet" />
<script src="libs/crosstalk/js/crosstalk.min.js"></script>
<link href="libs/plotly-htmlwidgets-css/plotly-htmlwidgets.css" rel="stylesheet" />
<script src="libs/plotly-main/plotly-latest.min.js"></script>
<script src="libs/core-js/shim.min.js"></script>
<script src="libs/react/react.min.js"></script>
<script src="libs/react/react-dom.min.js"></script>
<script src="libs/reactwidget/react-tools.js"></script>
<script src="libs/reactable-binding/reactable.js"></script>
<script src="libs/r2d3-render/r2d3-render.js"></script>
<script src="libs/webcomponents/webcomponents.js"></script>
<script src="libs/r2d3-binding/r2d3.js"></script>
<script src="libs/d3v5/d3.min.js"></script>
<script src="libs/viz/viz.js"></script>
<link href="libs/DiagrammeR-styles/styles.css" rel="stylesheet" />
<script src="libs/grViz-binding/grViz.js"></script>


<style type="text/css">
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
  { counter-reset: source-line 0; }
pre.numberSource code > span
  { position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
  { content: counter(source-line);
    position: relative; left: -1em; text-align: right; vertical-align: baseline;
    border: none; display: inline-block;
    -webkit-touch-callout: none; -webkit-user-select: none;
    -khtml-user-select: none; -moz-user-select: none;
    -ms-user-select: none; user-select: none;
    padding: 0 4px; width: 4em;
    color: #aaaaaa;
  }
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
div.sourceCode
  {   }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>

<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/toc.css" type="text/css" />
</head>

<body>



  <div class="book without-animation with-summary font-size-2 font-family-1" data-basepath=".">

    <div class="book-summary">
      <nav role="navigation">

<ul class="summary">
<li><a href="./">JavaScript for R</a></li>

<li class="divider"></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html"><i class="fa fa-check"></i>Preface</a>
<ul>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#premise"><i class="fa fa-check"></i>Premise</a></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#book-structure"><i class="fa fa-check"></i>Book Structure</a></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#acknowledgement"><i class="fa fa-check"></i>Acknowledgement</a></li>
</ul></li>
<li class="part"><span><b>I Basics &amp; Roadmap</b></span></li>
<li class="chapter" data-level="1" data-path="overview.html"><a href="overview.html"><i class="fa fa-check"></i><b>1</b> Overview</a>
<ul>
<li class="chapter" data-level="1.1" data-path="overview.html"><a href="overview.html#rationale"><i class="fa fa-check"></i><b>1.1</b> Rationale</a></li>
<li class="chapter" data-level="1.2" data-path="overview.html"><a href="overview.html#methods"><i class="fa fa-check"></i><b>1.2</b> Methods</a>
<ul>
<li class="chapter" data-level="1.2.1" data-path="overview.html"><a href="overview.html#v8"><i class="fa fa-check"></i><b>1.2.1</b> V8</a></li>
<li class="chapter" data-level="1.2.2" data-path="overview.html"><a href="overview.html#htmlwidgets"><i class="fa fa-check"></i><b>1.2.2</b> htmlwidgets</a></li>
<li class="chapter" data-level="1.2.3" data-path="overview.html"><a href="overview.html#shiny"><i class="fa fa-check"></i><b>1.2.3</b> Shiny</a></li>
<li class="chapter" data-level="1.2.4" data-path="overview.html"><a href="overview.html#bubble"><i class="fa fa-check"></i><b>1.2.4</b> bubble</a></li>
</ul></li>
<li class="chapter" data-level="1.3" data-path="overview.html"><a href="overview.html#methods-amiss"><i class="fa fa-check"></i><b>1.3</b> Methods Amiss</a>
<ul>
<li class="chapter" data-level="1.3.1" data-path="overview.html"><a href="overview.html#reactr"><i class="fa fa-check"></i><b>1.3.1</b> reactR</a></li>
<li class="chapter" data-level="1.3.2" data-path="overview.html"><a href="overview.html#r2d3"><i class="fa fa-check"></i><b>1.3.2</b> r2d3</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="2" data-path="prerequisites.html"><a href="prerequisites.html"><i class="fa fa-check"></i><b>2</b> Prerequisites</a>
<ul>
<li class="chapter" data-level="2.1" data-path="prerequisites.html"><a href="prerequisites.html#r-package-development"><i class="fa fa-check"></i><b>2.1</b> R Package Development</a>
<ul>
<li class="chapter" data-level="2.1.1" data-path="prerequisites.html"><a href="prerequisites.html#creating-a-package"><i class="fa fa-check"></i><b>2.1.1</b> Creating a Package</a></li>
<li class="chapter" data-level="2.1.2" data-path="prerequisites.html"><a href="prerequisites.html#metadata"><i class="fa fa-check"></i><b>2.1.2</b> Metadata</a></li>
<li class="chapter" data-level="2.1.3" data-path="prerequisites.html"><a href="prerequisites.html#r-code"><i class="fa fa-check"></i><b>2.1.3</b> R code</a></li>
<li class="chapter" data-level="2.1.4" data-path="prerequisites.html"><a href="prerequisites.html#documentation"><i class="fa fa-check"></i><b>2.1.4</b> Documentation</a></li>
<li class="chapter" data-level="2.1.5" data-path="prerequisites.html"><a href="prerequisites.html#installed-files"><i class="fa fa-check"></i><b>2.1.5</b> Installed files</a></li>
<li class="chapter" data-level="2.1.6" data-path="prerequisites.html"><a href="prerequisites.html#build-load-and-install"><i class="fa fa-check"></i><b>2.1.6</b> Build, load, and install</a></li>
</ul></li>
<li class="chapter" data-level="2.2" data-path="prerequisites.html"><a href="prerequisites.html#json"><i class="fa fa-check"></i><b>2.2</b> JSON</a>
<ul>
<li class="chapter" data-level="2.2.1" data-path="prerequisites.html"><a href="prerequisites.html#serialising"><i class="fa fa-check"></i><b>2.2.1</b> Serialising</a></li>
<li class="chapter" data-level="2.2.2" data-path="prerequisites.html"><a href="prerequisites.html#tabular-data"><i class="fa fa-check"></i><b>2.2.2</b> Tabular data</a></li>
</ul></li>
<li class="chapter" data-level="2.3" data-path="prerequisites.html"><a href="prerequisites.html#javascript"><i class="fa fa-check"></i><b>2.3</b> JavaScript</a>
<ul>
<li class="chapter" data-level="2.3.1" data-path="prerequisites.html"><a href="prerequisites.html#developer-tools"><i class="fa fa-check"></i><b>2.3.1</b> Developer tools</a></li>
<li class="chapter" data-level="2.3.2" data-path="prerequisites.html"><a href="prerequisites.html#variable-declaration-and-scope"><i class="fa fa-check"></i><b>2.3.2</b> Variable declaration and scope</a></li>
<li class="chapter" data-level="2.3.3" data-path="prerequisites.html"><a href="prerequisites.html#document-object-model"><i class="fa fa-check"></i><b>2.3.3</b> Document object model</a></li>
</ul></li>
<li class="chapter" data-level="2.4" data-path="overview.html"><a href="overview.html#shiny"><i class="fa fa-check"></i><b>2.4</b> Shiny</a>
<ul>
<li class="chapter" data-level="2.4.1" data-path="prerequisites.html"><a href="prerequisites.html#htmltools"><i class="fa fa-check"></i><b>2.4.1</b> Htmltools</a></li>
<li class="chapter" data-level="2.4.2" data-path="prerequisites.html"><a href="prerequisites.html#static-files"><i class="fa fa-check"></i><b>2.4.2</b> Static files</a></li>
<li class="chapter" data-level="2.4.3" data-path="prerequisites.html"><a href="prerequisites.html#dependencies-pros-and-cons"><i class="fa fa-check"></i><b>2.4.3</b> Dependencies Pros and Cons</a></li>
</ul></li>
</ul></li>
<li class="part"><span><b>II Data Visualisation</b></span></li>
<li class="chapter" data-level="3" data-path="introduction-to-widgets.html"><a href="introduction-to-widgets.html"><i class="fa fa-check"></i><b>3</b> Introduction to Widgets</a>
<ul>
<li class="chapter" data-level="3.1" data-path="introduction-to-widgets.html"><a href="introduction-to-widgets.html#plotly-package"><i class="fa fa-check"></i><b>3.1</b> Plotly package</a></li>
<li class="chapter" data-level="3.2" data-path="introduction-to-widgets.html"><a href="introduction-to-widgets.html#dt-package"><i class="fa fa-check"></i><b>3.2</b> DT package</a></li>
</ul></li>
<li class="chapter" data-level="4" data-path="basics-of-building-widgets.html"><a href="basics-of-building-widgets.html"><i class="fa fa-check"></i><b>4</b> Basics of Building Widgets</a>
<ul>
<li class="chapter" data-level="4.1" data-path="basics-of-building-widgets.html"><a href="basics-of-building-widgets.html#candidate-libraries"><i class="fa fa-check"></i><b>4.1</b> Candidate Libraries</a>
<ul>
<li class="chapter" data-level="4.1.1" data-path="basics-of-building-widgets.html"><a href="basics-of-building-widgets.html#plotly.js"><i class="fa fa-check"></i><b>4.1.1</b> Plotly.js</a></li>
<li class="chapter" data-level="4.1.2" data-path="basics-of-building-widgets.html"><a href="basics-of-building-widgets.html#highchart.js"><i class="fa fa-check"></i><b>4.1.2</b> Highchart.js</a></li>
<li class="chapter" data-level="4.1.3" data-path="basics-of-building-widgets.html"><a href="basics-of-building-widgets.html#chart.js"><i class="fa fa-check"></i><b>4.1.3</b> Chart.js</a></li>
</ul></li>
<li class="chapter" data-level="4.2" data-path="basics-of-building-widgets.html"><a href="basics-of-building-widgets.html#how-it-works"><i class="fa fa-check"></i><b>4.2</b> How it works</a></li>
</ul></li>
<li class="chapter" data-level="5" data-path="your-first-widget.html"><a href="your-first-widget.html"><i class="fa fa-check"></i><b>5</b> Your First Widget</a>
<ul>
<li class="chapter" data-level="5.1" data-path="your-first-widget.html"><a href="your-first-widget.html#the-htmlwidgets-scaffold"><i class="fa fa-check"></i><b>5.1</b> The Htmlwidgets Scaffold</a></li>
<li class="chapter" data-level="5.2" data-path="your-first-widget.html"><a href="your-first-widget.html#the-html-output"><i class="fa fa-check"></i><b>5.2</b> The HTML Output</a></li>
<li class="chapter" data-level="5.3" data-path="your-first-widget.html"><a href="your-first-widget.html#htmlwidgets-javascript-files"><i class="fa fa-check"></i><b>5.3</b> Htmlwidgets JavaScript Files</a></li>
</ul></li>
<li class="chapter" data-level="6" data-path="a-realistic-widget.html"><a href="a-realistic-widget.html"><i class="fa fa-check"></i><b>6</b> A Realistic Widget</a>
<ul>
<li class="chapter" data-level="6.1" data-path="a-realistic-widget.html"><a href="a-realistic-widget.html#peity.js-dependencies"><i class="fa fa-check"></i><b>6.1</b> Peity.js Dependencies</a></li>
<li class="chapter" data-level="6.2" data-path="a-realistic-widget.html"><a href="a-realistic-widget.html#peity.js-implementation"><i class="fa fa-check"></i><b>6.2</b> Peity.js Implementation</a></li>
<li class="chapter" data-level="6.3" data-path="a-realistic-widget.html"><a href="a-realistic-widget.html#peity.js-html-element"><i class="fa fa-check"></i><b>6.3</b> Peity.js HTML Element</a></li>
</ul></li>
<li class="chapter" data-level="7" data-path="the-full-monty.html"><a href="the-full-monty.html"><i class="fa fa-check"></i><b>7</b> The Full Monty</a>
<ul>
<li class="chapter" data-level="7.1" data-path="the-full-monty.html"><a href="the-full-monty.html#gio.js-dependencies"><i class="fa fa-check"></i><b>7.1</b> Gio.js Dependencies</a></li>
<li class="chapter" data-level="7.2" data-path="the-full-monty.html"><a href="the-full-monty.html#gio.js-javascript"><i class="fa fa-check"></i><b>7.2</b> Gio.js JavaScript</a></li>
<li class="chapter" data-level="7.3" data-path="the-full-monty.html"><a href="the-full-monty.html#working-with-data"><i class="fa fa-check"></i><b>7.3</b> Working with Data</a></li>
<li class="chapter" data-level="7.4" data-path="the-full-monty.html"><a href="the-full-monty.html#transforming-data"><i class="fa fa-check"></i><b>7.4</b> Transforming Data</a>
<ul>
<li class="chapter" data-level="7.4.1" data-path="the-full-monty.html"><a href="the-full-monty.html#using-javascript"><i class="fa fa-check"></i><b>7.4.1</b> Using JavaScript</a></li>
<li class="chapter" data-level="7.4.2" data-path="the-full-monty.html"><a href="the-full-monty.html#using-r"><i class="fa fa-check"></i><b>7.4.2</b> Using R</a></li>
<li class="chapter" data-level="7.4.3" data-path="the-full-monty.html"><a href="the-full-monty.html#pros-cons"><i class="fa fa-check"></i><b>7.4.3</b> Pros &amp; Cons</a></li>
</ul></li>
<li class="chapter" data-level="7.5" data-path="the-full-monty.html"><a href="the-full-monty.html#on-print-method"><i class="fa fa-check"></i><b>7.5</b> On Print Method</a></li>
</ul></li>
<li class="chapter" data-level="8" data-path="advanced-topics.html"><a href="advanced-topics.html"><i class="fa fa-check"></i><b>8</b> Advanced Topics</a>
<ul>
<li class="chapter" data-level="8.1" data-path="advanced-topics.html"><a href="advanced-topics.html#shared-variables"><i class="fa fa-check"></i><b>8.1</b> Shared Variables</a>
<ul>
<li class="chapter" data-level="8.1.1" data-path="advanced-topics.html"><a href="advanced-topics.html#sizing"><i class="fa fa-check"></i><b>8.1.1</b> Sizing</a></li>
<li class="chapter" data-level="8.1.2" data-path="advanced-topics.html"><a href="advanced-topics.html#sizing-policy"><i class="fa fa-check"></i><b>8.1.2</b> Sizing Policy</a></li>
</ul></li>
<li class="chapter" data-level="8.2" data-path="advanced-topics.html"><a href="advanced-topics.html#resizing"><i class="fa fa-check"></i><b>8.2</b> Resizing</a></li>
<li class="chapter" data-level="8.3" data-path="advanced-topics.html"><a href="advanced-topics.html#pre-render-hooks-security"><i class="fa fa-check"></i><b>8.3</b> Pre Render Hooks &amp; Security</a></li>
<li class="chapter" data-level="8.4" data-path="advanced-topics.html"><a href="advanced-topics.html#javascript-code"><i class="fa fa-check"></i><b>8.4</b> JavaScript Code</a></li>
<li class="chapter" data-level="8.5" data-path="advanced-topics.html"><a href="advanced-topics.html#prepend-append-content"><i class="fa fa-check"></i><b>8.5</b> Prepend &amp; Append Content</a></li>
<li class="chapter" data-level="8.6" data-path="advanced-topics.html"><a href="advanced-topics.html#dependencies"><i class="fa fa-check"></i><b>8.6</b> Dependencies</a></li>
<li class="chapter" data-level="8.7" data-path="advanced-topics.html"><a href="advanced-topics.html#compatibility"><i class="fa fa-check"></i><b>8.7</b> Compatibility</a></li>
<li class="chapter" data-level="8.8" data-path="advanced-topics.html"><a href="advanced-topics.html#unit-tests"><i class="fa fa-check"></i><b>8.8</b> Unit Tests</a></li>
<li class="chapter" data-level="8.9" data-path="advanced-topics.html"><a href="advanced-topics.html#performances"><i class="fa fa-check"></i><b>8.9</b> Performances</a></li>
</ul></li>
<li class="chapter" data-level="9" data-path="linking-widgets.html"><a href="linking-widgets.html"><i class="fa fa-check"></i><b>9</b> Linking Widgets</a>
<ul>
<li class="chapter" data-level="9.1" data-path="linking-widgets.html"><a href="linking-widgets.html#crosstalk-examples"><i class="fa fa-check"></i><b>9.1</b> Crosstalk examples</a></li>
<li class="chapter" data-level="9.2" data-path="linking-widgets.html"><a href="linking-widgets.html#crosstalk-requirements"><i class="fa fa-check"></i><b>9.2</b> Crosstalk requirements</a></li>
<li class="chapter" data-level="9.3" data-path="basics-of-building-widgets.html"><a href="basics-of-building-widgets.html#how-it-works"><i class="fa fa-check"></i><b>9.3</b> How it works</a></li>
<li class="chapter" data-level="9.4" data-path="linking-widgets.html"><a href="linking-widgets.html#crosstalk-with-gio"><i class="fa fa-check"></i><b>9.4</b> Crosstalk with gio</a></li>
<li class="chapter" data-level="9.5" data-path="linking-widgets.html"><a href="linking-widgets.html#adapt-the-r-code"><i class="fa fa-check"></i><b>9.5</b> Adapt the R code</a></li>
<li class="chapter" data-level="9.6" data-path="linking-widgets.html"><a href="linking-widgets.html#change-the-javascript-code"><i class="fa fa-check"></i><b>9.6</b> Change the JavaScript code</a>
<ul>
<li class="chapter" data-level="9.6.1" data-path="linking-widgets.html"><a href="linking-widgets.html#send-selected-keys"><i class="fa fa-check"></i><b>9.6.1</b> Send selected keys</a></li>
<li class="chapter" data-level="9.6.2" data-path="linking-widgets.html"><a href="linking-widgets.html#set-selected-keys"><i class="fa fa-check"></i><b>9.6.2</b> Set selected keys</a></li>
<li class="chapter" data-level="9.6.3" data-path="linking-widgets.html"><a href="linking-widgets.html#recap-javascript-code"><i class="fa fa-check"></i><b>9.6.3</b> Recap JavaScript code</a></li>
</ul></li>
<li class="chapter" data-level="9.7" data-path="linking-widgets.html"><a href="linking-widgets.html#using-crosstalk-with-gio"><i class="fa fa-check"></i><b>9.7</b> Using crosstalk with gio</a></li>
</ul></li>
<li class="chapter" data-level="10" data-path="final-revisions.html"><a href="final-revisions.html"><i class="fa fa-check"></i><b>10</b> Final Revisions</a>
<ul>
<li class="chapter" data-level="10.1" data-path="final-revisions.html"><a href="final-revisions.html#htmlwidgets-data"><i class="fa fa-check"></i><b>10.1</b> Htmlwidgets &amp; Data</a></li>
<li class="chapter" data-level="10.2" data-path="final-revisions.html"><a href="final-revisions.html#plethora-of-options"><i class="fa fa-check"></i><b>10.2</b> Plethora of Options</a></li>
<li class="chapter" data-level="10.3" data-path="final-revisions.html"><a href="final-revisions.html#interface-design"><i class="fa fa-check"></i><b>10.3</b> Interface Design</a></li>
</ul></li>
<li class="chapter" data-level="11" data-path="excercise-ploty.html"><a href="excercise-ploty.html"><i class="fa fa-check"></i><b>11</b> Excercise - Ploty</a>
<ul>
<li class="chapter" data-level="11.1" data-path="excercise-ploty.html"><a href="excercise-ploty.html#discover-plotly"><i class="fa fa-check"></i><b>11.1</b> Discover Plotly</a></li>
<li class="chapter" data-level="11.2" data-path="excercise-ploty.html"><a href="excercise-ploty.html#basics-of-plotly"><i class="fa fa-check"></i><b>11.2</b> Basics of Plotly</a></li>
<li class="chapter" data-level="11.3" data-path="excercise-ploty.html"><a href="excercise-ploty.html#plotly.js-to-r"><i class="fa fa-check"></i><b>11.3</b> Plotly.js to R</a></li>
<li class="chapter" data-level="11.4" data-path="excercise-ploty.html"><a href="excercise-ploty.html#r-to-plotly.js"><i class="fa fa-check"></i><b>11.4</b> R to Plotly.js</a></li>
<li class="chapter" data-level="11.5" data-path="excercise-ploty.html"><a href="excercise-ploty.html#size-resize-plotly.js"><i class="fa fa-check"></i><b>11.5</b> Size &amp; Resize Plotly.js</a></li>
<li class="chapter" data-level="11.6" data-path="excercise-ploty.html"><a href="excercise-ploty.html#performance-security-with-plotly.js"><i class="fa fa-check"></i><b>11.6</b> Performance &amp; Security with Plotly.js</a></li>
</ul></li>
<li class="part"><span><b>III Web Development with Shiny</b></span></li>
<li class="chapter" data-level="12" data-path="introduction-to-shiny.html"><a href="introduction-to-shiny.html"><i class="fa fa-check"></i><b>12</b> Introduction to Shiny</a>
<ul>
<li class="chapter" data-level="12.1" data-path="introduction-to-shiny.html"><a href="introduction-to-shiny.html#websocket-shiny"><i class="fa fa-check"></i><b>12.1</b> Websocket &amp; Shiny</a></li>
<li class="chapter" data-level="12.2" data-path="introduction-to-shiny.html"><a href="introduction-to-shiny.html#alerts-an-example"><i class="fa fa-check"></i><b>12.2</b> Alerts, An Example</a></li>
<li class="chapter" data-level="12.3" data-path="introduction-to-shiny.html"><a href="introduction-to-shiny.html#alerts-r-to-js"><i class="fa fa-check"></i><b>12.3</b> From R to JavaScript</a></li>
<li class="chapter" data-level="12.4" data-path="introduction-to-shiny.html"><a href="introduction-to-shiny.html#alerts-js-to-r"><i class="fa fa-check"></i><b>12.4</b> From JavaScript to R</a></li>
<li class="chapter" data-level="12.5" data-path="introduction-to-shiny.html"><a href="introduction-to-shiny.html#alerts-deserialise"><i class="fa fa-check"></i><b>12.5</b> Deserialise</a></li>
</ul></li>
<li class="chapter" data-level="13" data-path="a-complete-integration.html"><a href="a-complete-integration.html"><i class="fa fa-check"></i><b>13</b> A Complete Integration</a>
<ul>
<li class="chapter" data-level="13.1" data-path="a-complete-integration.html"><a href="a-complete-integration.html#serialisation"><i class="fa fa-check"></i><b>13.1</b> Serialisation</a></li>
<li class="chapter" data-level="13.2" data-path="a-complete-integration.html"><a href="a-complete-integration.html#events-callbacks"><i class="fa fa-check"></i><b>13.2</b> Events &amp; Callbacks</a></li>
<li class="chapter" data-level="13.3" data-path="a-complete-integration.html"><a href="a-complete-integration.html#as-a-package"><i class="fa fa-check"></i><b>13.3</b> As a Package</a>
<ul>
<li class="chapter" data-level="13.3.1" data-path="advanced-topics.html"><a href="advanced-topics.html#dependencies"><i class="fa fa-check"></i><b>13.3.1</b> Dependencies</a></li>
<li class="chapter" data-level="13.3.2" data-path="prerequisites.html"><a href="prerequisites.html#r-code"><i class="fa fa-check"></i><b>13.3.2</b> R Code</a></li>
<li class="chapter" data-level="13.3.3" data-path="advanced-topics.html"><a href="advanced-topics.html#javascript-code"><i class="fa fa-check"></i><b>13.3.3</b> JavaScript Code</a></li>
<li class="chapter" data-level="13.3.4" data-path="a-complete-integration.html"><a href="a-complete-integration.html#input-handler"><i class="fa fa-check"></i><b>13.3.4</b> Input Handler</a></li>
<li class="chapter" data-level="13.3.5" data-path="a-complete-integration.html"><a href="a-complete-integration.html#wrapping-up"><i class="fa fa-check"></i><b>13.3.5</b> Wrapping up</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="14" data-path="tips-tricks.html"><a href="tips-tricks.html"><i class="fa fa-check"></i><b>14</b> Tips &amp; Tricks</a>
<ul>
<li class="chapter" data-level="14.1" data-path="tips-tricks.html"><a href="tips-tricks.html#shiny-events"><i class="fa fa-check"></i><b>14.1</b> Shiny Events</a></li>
<li class="chapter" data-level="14.2" data-path="tips-tricks.html"><a href="tips-tricks.html#table-buttons"><i class="fa fa-check"></i><b>14.2</b> Table Buttons</a></li>
<li class="chapter" data-level="14.3" data-path="tips-tricks.html"><a href="tips-tricks.html#jquery---toggle"><i class="fa fa-check"></i><b>14.3</b> jQuery - Toggle</a></li>
</ul></li>
<li class="chapter" data-level="15" data-path="custom-outputs.html"><a href="custom-outputs.html"><i class="fa fa-check"></i><b>15</b> Custom Outputs</a>
<ul>
<li class="chapter" data-level="15.1" data-path="custom-outputs.html"><a href="custom-outputs.html#custom-outputs-inner-workings"><i class="fa fa-check"></i><b>15.1</b> Custom Outputs Inner-workings</a></li>
<li class="chapter" data-level="15.2" data-path="custom-outputs.html"><a href="custom-outputs.html#setup-custom-output"><i class="fa fa-check"></i><b>15.2</b> Setup Custom Output</a></li>
<li class="chapter" data-level="15.3" data-path="custom-outputs.html"><a href="custom-outputs.html#output-r-function"><i class="fa fa-check"></i><b>15.3</b> Output R Function</a></li>
<li class="chapter" data-level="15.4" data-path="custom-outputs.html"><a href="custom-outputs.html#generate-output-html"><i class="fa fa-check"></i><b>15.4</b> Generate Output HTML</a></li>
<li class="chapter" data-level="15.5" data-path="custom-outputs.html"><a href="custom-outputs.html#output-renderer"><i class="fa fa-check"></i><b>15.5</b> Output Renderer</a></li>
<li class="chapter" data-level="15.6" data-path="custom-outputs.html"><a href="custom-outputs.html#javascript-output-binding"><i class="fa fa-check"></i><b>15.6</b> JavaScript Output Binding</a>
<ul>
<li class="chapter" data-level="15.6.1" data-path="custom-outputs.html"><a href="custom-outputs.html#boxxy-title"><i class="fa fa-check"></i><b>15.6.1</b> Boxxy title</a></li>
<li class="chapter" data-level="15.6.2" data-path="custom-outputs.html"><a href="custom-outputs.html#boxxy-value"><i class="fa fa-check"></i><b>15.6.2</b> Boxxy value</a></li>
<li class="chapter" data-level="15.6.3" data-path="custom-outputs.html"><a href="custom-outputs.html#boxxy-background-color"><i class="fa fa-check"></i><b>15.6.3</b> Boxxy Background Color</a></li>
<li class="chapter" data-level="15.6.4" data-path="custom-outputs.html"><a href="custom-outputs.html#register-the-output-binding"><i class="fa fa-check"></i><b>15.6.4</b> Register the Output Binding</a></li>
</ul></li>
<li class="chapter" data-level="15.7" data-path="custom-outputs.html"><a href="custom-outputs.html#boxxy-usage"><i class="fa fa-check"></i><b>15.7</b> Boxxy Usage</a></li>
<li class="chapter" data-level="15.8" data-path="custom-outputs.html"><a href="custom-outputs.html#injecting-dependencies"><i class="fa fa-check"></i><b>15.8</b> Injecting Dependencies</a></li>
<li class="chapter" data-level="15.9" data-path="custom-outputs.html"><a href="custom-outputs.html#preprocessing-custom-outputs"><i class="fa fa-check"></i><b>15.9</b> Preprocessing Custom Outputs</a></li>
</ul></li>
<li class="chapter" data-level="16" data-path="custom-inputs.html"><a href="custom-inputs.html"><i class="fa fa-check"></i><b>16</b> Custom Inputs</a>
<ul>
<li class="chapter" data-level="16.1" data-path="custom-inputs.html"><a href="custom-inputs.html#setup-custom-input"><i class="fa fa-check"></i><b>16.1</b> Setup Custom Input</a></li>
<li class="chapter" data-level="16.2" data-path="custom-inputs.html"><a href="custom-inputs.html#switch-input-html-style"><i class="fa fa-check"></i><b>16.2</b> Switch Input HTML &amp; Style</a></li>
<li class="chapter" data-level="16.3" data-path="custom-inputs.html"><a href="custom-inputs.html#generate-input-html"><i class="fa fa-check"></i><b>16.3</b> Generate Input HTML</a></li>
<li class="chapter" data-level="16.4" data-path="custom-inputs.html"><a href="custom-inputs.html#javascript-input-binding"><i class="fa fa-check"></i><b>16.4</b> JavaScript Input Binding</a>
<ul>
<li class="chapter" data-level="16.4.1" data-path="custom-inputs.html"><a href="custom-inputs.html#find-inputs"><i class="fa fa-check"></i><b>16.4.1</b> Find Inputs</a></li>
<li class="chapter" data-level="16.4.2" data-path="custom-inputs.html"><a href="custom-inputs.html#get-input-id"><i class="fa fa-check"></i><b>16.4.2</b> Get Input Id</a></li>
<li class="chapter" data-level="16.4.3" data-path="custom-inputs.html"><a href="custom-inputs.html#get-input-value"><i class="fa fa-check"></i><b>16.4.3</b> Get Input Value</a></li>
<li class="chapter" data-level="16.4.4" data-path="custom-inputs.html"><a href="custom-inputs.html#set-input-value"><i class="fa fa-check"></i><b>16.4.4</b> Set Input Value</a></li>
<li class="chapter" data-level="16.4.5" data-path="custom-inputs.html"><a href="custom-inputs.html#receive-input-messages"><i class="fa fa-check"></i><b>16.4.5</b> Receive Input Messages</a></li>
<li class="chapter" data-level="16.4.6" data-path="custom-inputs.html"><a href="custom-inputs.html#subscribe-unsubscribe-inputs"><i class="fa fa-check"></i><b>16.4.6</b> Subscribe &amp; Unsubscribe Inputs</a></li>
<li class="chapter" data-level="16.4.7" data-path="custom-inputs.html"><a href="custom-inputs.html#input-rate-policy"><i class="fa fa-check"></i><b>16.4.7</b> Input Rate Policy</a></li>
<li class="chapter" data-level="16.4.8" data-path="custom-inputs.html"><a href="custom-inputs.html#registering-the-input"><i class="fa fa-check"></i><b>16.4.8</b> Registering the Input</a></li>
</ul></li>
<li class="chapter" data-level="16.5" data-path="custom-inputs.html"><a href="custom-inputs.html#update-input"><i class="fa fa-check"></i><b>16.5</b> Update Input</a></li>
<li class="chapter" data-level="16.6" data-path="custom-inputs.html"><a href="custom-inputs.html#exercise"><i class="fa fa-check"></i><b>16.6</b> Exercise</a></li>
</ul></li>
<li class="chapter" data-level="17" data-path="cookies.html"><a href="cookies.html"><i class="fa fa-check"></i><b>17</b> Cookies</a>
<ul>
<li class="chapter" data-level="17.1" data-path="cookies.html"><a href="cookies.html#discover-js-cookie"><i class="fa fa-check"></i><b>17.1</b> Discover js-cookie</a></li>
<li class="chapter" data-level="17.2" data-path="cookies.html"><a href="cookies.html#setup-cookies-project"><i class="fa fa-check"></i><b>17.2</b> Setup Cookies Project</a></li>
<li class="chapter" data-level="17.3" data-path="cookies.html"><a href="cookies.html#javascript-cookies"><i class="fa fa-check"></i><b>17.3</b> JavaScript Cookies</a></li>
<li class="chapter" data-level="17.4" data-path="cookies.html"><a href="cookies.html#r-code-for-cookies"><i class="fa fa-check"></i><b>17.4</b> R Code for Cookies</a></li>
</ul></li>
<li class="chapter" data-level="18" data-path="widgets-with-shiny.html"><a href="widgets-with-shiny.html"><i class="fa fa-check"></i><b>18</b> Widgets with Shiny</a>
<ul>
<li class="chapter" data-level="18.1" data-path="widgets-with-shiny.html"><a href="widgets-with-shiny.html#widgets-to-r"><i class="fa fa-check"></i><b>18.1</b> Widgets to R</a></li>
<li class="chapter" data-level="18.2" data-path="widgets-with-shiny.html"><a href="widgets-with-shiny.html#input-handlers-for-widgets"><i class="fa fa-check"></i><b>18.2</b> Input Handlers for Widgets</a></li>
<li class="chapter" data-level="18.3" data-path="widgets-with-shiny.html"><a href="widgets-with-shiny.html#r-to-widgets"><i class="fa fa-check"></i><b>18.3</b> R to Widgets</a>
<ul>
<li class="chapter" data-level="18.3.1" data-path="widgets-with-shiny.html"><a href="widgets-with-shiny.html#send-data-from-widgets"><i class="fa fa-check"></i><b>18.3.1</b> Send Data from Widgets</a></li>
<li class="chapter" data-level="18.3.2" data-path="widgets-with-shiny.html"><a href="widgets-with-shiny.html#retrieve-widget-instance"><i class="fa fa-check"></i><b>18.3.2</b> Retrieve Widget Instance</a></li>
<li class="chapter" data-level="18.3.3" data-path="widgets-with-shiny.html"><a href="widgets-with-shiny.html#handle-data"><i class="fa fa-check"></i><b>18.3.3</b> Handle Data</a></li>
</ul></li>
<li class="chapter" data-level="18.4" data-path="widgets-with-shiny.html"><a href="widgets-with-shiny.html#proxy-function"><i class="fa fa-check"></i><b>18.4</b> Proxy Function</a></li>
<li class="chapter" data-level="18.5" data-path="widgets-with-shiny.html"><a href="widgets-with-shiny.html#clear-data"><i class="fa fa-check"></i><b>18.5</b> Clear Data</a></li>
<li class="chapter" data-level="18.6" data-path="widgets-with-shiny.html"><a href="widgets-with-shiny.html#update-the-widget"><i class="fa fa-check"></i><b>18.6</b> Update the Widget</a></li>
</ul></li>
<li class="part"><span><b>IV Interactive Documents</b></span></li>
<li class="chapter" data-level="19" data-path="introduction-to-rmarkdown.html"><a href="introduction-to-rmarkdown.html"><i class="fa fa-check"></i><b>19</b> Introduction to Rmarkdown</a></li>
<li class="part"><span><b>V JavaScript for Computations</b></span></li>
<li class="chapter" data-level="20" data-path="the-v8-engine.html"><a href="the-v8-engine.html"><i class="fa fa-check"></i><b>20</b> The V8 Engine</a>
<ul>
<li class="chapter" data-level="20.1" data-path="the-v8-engine.html"><a href="the-v8-engine.html#installation"><i class="fa fa-check"></i><b>20.1</b> Installation</a></li>
<li class="chapter" data-level="20.2" data-path="the-v8-engine.html"><a href="the-v8-engine.html#basics"><i class="fa fa-check"></i><b>20.2</b> Basics</a></li>
<li class="chapter" data-level="20.3" data-path="the-v8-engine.html"><a href="the-v8-engine.html#external-libraries"><i class="fa fa-check"></i><b>20.3</b> External Libraries</a></li>
<li class="chapter" data-level="20.4" data-path="the-v8-engine.html"><a href="the-v8-engine.html#with-npm"><i class="fa fa-check"></i><b>20.4</b> With Npm</a></li>
<li class="chapter" data-level="20.5" data-path="the-v8-engine.html"><a href="the-v8-engine.html#use-in-packages"><i class="fa fa-check"></i><b>20.5</b> Use in Packages</a></li>
</ul></li>
<li class="chapter" data-level="21" data-path="exercise-machine-learning.html"><a href="exercise-machine-learning.html"><i class="fa fa-check"></i><b>21</b> Exercise - Machine Learning</a>
<ul>
<li class="chapter" data-level="21.1" data-path="exercise-machine-learning.html"><a href="exercise-machine-learning.html#dependency"><i class="fa fa-check"></i><b>21.1</b> Dependency</a></li>
<li class="chapter" data-level="21.2" data-path="exercise-machine-learning.html"><a href="exercise-machine-learning.html#simple-regression"><i class="fa fa-check"></i><b>21.2</b> Simple Regression</a></li>
</ul></li>
<li class="part"><span><b>VI Examples</b></span></li>
<li class="chapter" data-level="22" data-path="image-classifier.html"><a href="image-classifier.html"><i class="fa fa-check"></i><b>22</b> Image Classifier</a>
<ul>
<li class="chapter" data-level="22.1" data-path="image-classifier.html"><a href="image-classifier.html#discover"><i class="fa fa-check"></i><b>22.1</b> Discover</a></li>
<li class="chapter" data-level="22.2" data-path="image-classifier.html"><a href="image-classifier.html#setup"><i class="fa fa-check"></i><b>22.2</b> Setup</a></li>
<li class="chapter" data-level="22.3" data-path="prerequisites.html"><a href="prerequisites.html#javascript"><i class="fa fa-check"></i><b>22.3</b> JavaScript</a></li>
<li class="chapter" data-level="22.4" data-path="a-complete-integration.html"><a href="a-complete-integration.html#input-handler"><i class="fa fa-check"></i><b>22.4</b> Input Handler</a></li>
</ul></li>
<li class="chapter" data-level="23" data-path="progress-bar.html"><a href="progress-bar.html"><i class="fa fa-check"></i><b>23</b> Progress Bar</a>
<ul>
<li class="chapter" data-level="23.1" data-path="prerequisites.html"><a href="prerequisites.html#r-code"><i class="fa fa-check"></i><b>23.1</b> R code</a></li>
<li class="chapter" data-level="23.2" data-path="advanced-topics.html"><a href="advanced-topics.html#javascript-code"><i class="fa fa-check"></i><b>23.2</b> JavaScript code</a></li>
<li class="chapter" data-level="23.3" data-path="progress-bar.html"><a href="progress-bar.html#events"><i class="fa fa-check"></i><b>23.3</b> Events</a></li>
</ul></li>
<li class="part"><span><b>VII Closing Remarks</b></span></li>
<li class="chapter" data-level="24" data-path="conclusion.html"><a href="conclusion.html"><i class="fa fa-check"></i><b>24</b> Conclusion</a>
<ul>
<li class="chapter" data-level="24.1" data-path="advanced-topics.html"><a href="advanced-topics.html#performances"><i class="fa fa-check"></i><b>24.1</b> Performances</a></li>
<li class="chapter" data-level="24.2" data-path="conclusion.html"><a href="conclusion.html#road-ahead"><i class="fa fa-check"></i><b>24.2</b> Road ahead</a>
<ul>
<li class="chapter" data-level="24.2.1" data-path="conclusion.html"><a href="conclusion.html#computation"><i class="fa fa-check"></i><b>24.2.1</b> Computation</a></li>
<li class="chapter" data-level="24.2.2" data-path="overview.html"><a href="overview.html#shiny"><i class="fa fa-check"></i><b>24.2.2</b> Shiny</a></li>
<li class="chapter" data-level="24.2.3" data-path="overview.html"><a href="overview.html#htmlwidgets"><i class="fa fa-check"></i><b>24.2.3</b> htmlwidgets</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="" data-path="references.html"><a href="references.html"><i class="fa fa-check"></i>References</a></li>
</ul>

      </nav>
    </div>

    <div class="book-body">
      <div class="body-inner">
        <div class="book-header" role="navigation">
          <h1>
            <i class="fa fa-circle-o-notch fa-spin"></i><a href="./">JavaScript for R</a>
          </h1>
        </div>

        <div class="page-wrapper" tabindex="-1" role="main">
          <div class="page-inner">

            <section class="normal" id="section-">
<div id="image-classifier" class="section level1" number="22">
<h1><span class="header-section-number">Chapter 22</span> Image Classifier</h1>
<p>In this example we bring <a href="https://learn.ml5js.org/">ml5.js</a> to R using Shiny, more specifically its image classifier using <a href="https://arxiv.org/abs/1704.04861">mobileNet</a>. Using shiny and JavaScript the model can run in the client’s browser and the predictions can be sent back to the server. This means the model uses the client’s computing power to run the prediction rather than the server, thereby alleviating computation on the server and bypassing shiny’s limitations with regard to concurrent users.</p>
<div id="discover" class="section level2" number="22.1">
<h2><span class="header-section-number">22.1</span> Discover</h2>
<p>Then again the journey starts by exploring ml5.js and the classifier we are going to use. One starts by instantiating an image classifier, specifying the model to use (ml5.js comes with a few out of the box but also allows using custom models), then the classifier is used on an image present in the DOM.</p>
<div class="sourceCode" id="cb465"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb465-1"><a href="image-classifier.html#cb465-1"></a><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span></span>
<span id="cb465-2"><a href="image-classifier.html#cb465-2"></a><span class="kw">&lt;html</span><span class="ot"> xmlns=</span><span class="st">&quot;http://www.w3.org/1999/xhtml&quot;</span><span class="ot"> lang=</span><span class="st">&quot;&quot;</span><span class="ot"> xml:lang=</span><span class="st">&quot;&quot;</span><span class="kw">&gt;</span></span>
<span id="cb465-3"><a href="image-classifier.html#cb465-3"></a></span>
<span id="cb465-4"><a href="image-classifier.html#cb465-4"></a><span class="kw">&lt;head&gt;</span></span>
<span id="cb465-5"><a href="image-classifier.html#cb465-5"></a>  <span class="co">&lt;!-- Import library --&gt;</span></span>
<span id="cb465-6"><a href="image-classifier.html#cb465-6"></a>  <span class="kw">&lt;script</span> </span>
<span id="cb465-7"><a href="image-classifier.html#cb465-7"></a><span class="ot">    src=</span><span class="st">&quot;https://unpkg.com/ml5@0.4.3/dist/ml5.min.js&quot;</span><span class="kw">&gt;</span></span>
<span id="cb465-8"><a href="image-classifier.html#cb465-8"></a>  <span class="kw">&lt;/script&gt;</span></span>
<span id="cb465-9"><a href="image-classifier.html#cb465-9"></a><span class="kw">&lt;/head&gt;</span></span>
<span id="cb465-10"><a href="image-classifier.html#cb465-10"></a></span>
<span id="cb465-11"><a href="image-classifier.html#cb465-11"></a><span class="kw">&lt;body&gt;</span></span>
<span id="cb465-12"><a href="image-classifier.html#cb465-12"></a>  <span class="co">&lt;!-- image to classify --&gt;</span></span>
<span id="cb465-13"><a href="image-classifier.html#cb465-13"></a>  <span class="kw">&lt;img</span><span class="ot"> id=</span><span class="st">&quot;dog&quot;</span><span class="ot"> src=</span><span class="st">&quot;www/doge.jpg&quot;</span><span class="kw">/&gt;</span></span>
<span id="cb465-14"><a href="image-classifier.html#cb465-14"></a></span>
<span id="cb465-15"><a href="image-classifier.html#cb465-15"></a>  <span class="co">&lt;!-- Script to run classifier --&gt;</span></span>
<span id="cb465-16"><a href="image-classifier.html#cb465-16"></a>  <span class="kw">&lt;script&gt;</span></span>
<span id="cb465-17"><a href="image-classifier.html#cb465-17"></a>    <span class="co">// Initialize the Image Classifier method with MobileNet</span></span>
<span id="cb465-18"><a href="image-classifier.html#cb465-18"></a>    <span class="kw">const</span> classifier <span class="op">=</span> ml5<span class="op">.</span><span class="fu">imageClassifier</span>(</span>
<span id="cb465-19"><a href="image-classifier.html#cb465-19"></a>      <span class="st">&#39;MobileNet&#39;</span><span class="op">,</span> modelLoaded</span>
<span id="cb465-20"><a href="image-classifier.html#cb465-20"></a>    )<span class="op">;</span></span>
<span id="cb465-21"><a href="image-classifier.html#cb465-21"></a></span>
<span id="cb465-22"><a href="image-classifier.html#cb465-22"></a>    <span class="co">// Runs when the model is loaded</span></span>
<span id="cb465-23"><a href="image-classifier.html#cb465-23"></a>    <span class="kw">function</span> <span class="fu">modelLoaded</span>() {</span>
<span id="cb465-24"><a href="image-classifier.html#cb465-24"></a>      <span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(<span class="st">&#39;Model Loaded!&#39;</span>)<span class="op">;</span></span>
<span id="cb465-25"><a href="image-classifier.html#cb465-25"></a>    }</span>
<span id="cb465-26"><a href="image-classifier.html#cb465-26"></a></span>
<span id="cb465-27"><a href="image-classifier.html#cb465-27"></a>    <span class="co">// Make a prediction with a selected image</span></span>
<span id="cb465-28"><a href="image-classifier.html#cb465-28"></a>    classifier<span class="op">.</span><span class="fu">classify</span>(</span>
<span id="cb465-29"><a href="image-classifier.html#cb465-29"></a>      <span class="bu">document</span><span class="op">.</span><span class="fu">getElementById</span>(<span class="st">&#39;dog&#39;</span>)<span class="op">,</span> (err<span class="op">,</span> results) <span class="kw">=&gt;</span> {</span>
<span id="cb465-30"><a href="image-classifier.html#cb465-30"></a>        <span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(results)<span class="op">;</span></span>
<span id="cb465-31"><a href="image-classifier.html#cb465-31"></a>    })<span class="op">;</span></span>
<span id="cb465-32"><a href="image-classifier.html#cb465-32"></a>  <span class="kw">&lt;/script&gt;</span></span>
<span id="cb465-33"><a href="image-classifier.html#cb465-33"></a><span class="kw">&lt;/body&gt;</span></span>
<span id="cb465-34"><a href="image-classifier.html#cb465-34"></a></span>
<span id="cb465-35"><a href="image-classifier.html#cb465-35"></a><span class="kw">&lt;/html&gt;</span></span></code></pre></div>
</div>
<div id="setup" class="section level2" number="22.2">
<h2><span class="header-section-number">22.2</span> Setup</h2>
<p>In shiny, we would need to pass the id of the image (<code>dog</code> above) to be sent from the server and the callback function to return the results to R. The projects starts from an empty directory, before creating actual application let us create the directory of static files that will contain the JavaScript file (<code>classify.js</code>) and the images to classify. Feel free download whichever images you want, below we download images of birds from Wikipedia.</p>
<div class="sourceCode" id="cb466"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb466-1"><a href="image-classifier.html#cb466-1"></a><span class="co"># static files</span></span>
<span id="cb466-2"><a href="image-classifier.html#cb466-2"></a><span class="kw">dir.create</span>(<span class="st">&quot;www&quot;</span>)</span>
<span id="cb466-3"><a href="image-classifier.html#cb466-3"></a><span class="kw">file.create</span>(<span class="st">&quot;www/classify.js&quot;</span>)</span>
<span id="cb466-4"><a href="image-classifier.html#cb466-4"></a></span>
<span id="cb466-5"><a href="image-classifier.html#cb466-5"></a><span class="co"># flamingo</span></span>
<span id="cb466-6"><a href="image-classifier.html#cb466-6"></a>fl &lt;-<span class="st"> </span><span class="kw">paste0</span>(</span>
<span id="cb466-7"><a href="image-classifier.html#cb466-7"></a>  <span class="st">&quot;https://upload.wikimedia.org/wikipedia/&quot;</span>,</span>
<span id="cb466-8"><a href="image-classifier.html#cb466-8"></a>  <span class="st">&quot;commons/thumb/7/72/American_flamingo&quot;</span>,</span>
<span id="cb466-9"><a href="image-classifier.html#cb466-9"></a>  <span class="st">&quot;_%28Phoenicopterus_ruber%29.JPG/256px-&quot;</span>,</span>
<span id="cb466-10"><a href="image-classifier.html#cb466-10"></a>  <span class="st">&quot;American_flamingo_%28Phoenicopterus_ruber%29.JPG&quot;</span></span>
<span id="cb466-11"><a href="image-classifier.html#cb466-11"></a>)</span>
<span id="cb466-12"><a href="image-classifier.html#cb466-12"></a></span>
<span id="cb466-13"><a href="image-classifier.html#cb466-13"></a><span class="co"># lorikeet</span></span>
<span id="cb466-14"><a href="image-classifier.html#cb466-14"></a>lo &lt;-<span class="st"> </span><span class="kw">paste0</span>(</span>
<span id="cb466-15"><a href="image-classifier.html#cb466-15"></a>  <span class="st">&quot;https://upload.wikimedia.org/wikipedia/&quot;</span>,</span>
<span id="cb466-16"><a href="image-classifier.html#cb466-16"></a>  <span class="st">&quot;commons/thumb/c/c2/Rainbow_lorikeet.jpg/&quot;</span>,</span>
<span id="cb466-17"><a href="image-classifier.html#cb466-17"></a>  <span class="st">&quot;256px-Rainbow_lorikeet.jpg&quot;</span></span>
<span id="cb466-18"><a href="image-classifier.html#cb466-18"></a>)</span>
<span id="cb466-19"><a href="image-classifier.html#cb466-19"></a></span>
<span id="cb466-20"><a href="image-classifier.html#cb466-20"></a><span class="co"># download</span></span>
<span id="cb466-21"><a href="image-classifier.html#cb466-21"></a><span class="kw">download.file</span>(fl, <span class="dt">destfile =</span> <span class="st">&quot;www/flamingo.jpg&quot;</span>)</span>
<span id="cb466-22"><a href="image-classifier.html#cb466-22"></a><span class="kw">download.file</span>(lo, <span class="dt">destfile =</span> <span class="st">&quot;www/lorikeet.jpg&quot;</span>)</span></code></pre></div>
<p>Once images are downloaded we can build the basic skeleton of the app. We import ml5.js from the CDN, create a select input to switch between the two images of birds that were downloaded and use <code>renderUI</code> to dynamically render the selected image. Finally, we create a button to trigger the classification, though it currently sends an empty list to a message handler that we are yet to create.</p>
<div class="sourceCode" id="cb467"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb467-1"><a href="image-classifier.html#cb467-1"></a><span class="kw">library</span>(<span class="st">&quot;shiny&quot;</span>)</span>
<span id="cb467-2"><a href="image-classifier.html#cb467-2"></a></span>
<span id="cb467-3"><a href="image-classifier.html#cb467-3"></a><span class="kw">addResourcePath</span>(<span class="st">&quot;www&quot;</span>, <span class="st">&quot;www&quot;</span>)</span>
<span id="cb467-4"><a href="image-classifier.html#cb467-4"></a></span>
<span id="cb467-5"><a href="image-classifier.html#cb467-5"></a>ui &lt;-<span class="st"> </span><span class="kw">fluidPage</span>(</span>
<span id="cb467-6"><a href="image-classifier.html#cb467-6"></a>  tags<span class="op">$</span><span class="kw">head</span>(</span>
<span id="cb467-7"><a href="image-classifier.html#cb467-7"></a>    tags<span class="op">$</span><span class="kw">script</span>(</span>
<span id="cb467-8"><a href="image-classifier.html#cb467-8"></a>      <span class="dt">src =</span> <span class="st">&quot;https://unpkg.com/ml5@0.4.3/dist/ml5.min.js&quot;</span></span>
<span id="cb467-9"><a href="image-classifier.html#cb467-9"></a>    )</span>
<span id="cb467-10"><a href="image-classifier.html#cb467-10"></a>  ),</span>
<span id="cb467-11"><a href="image-classifier.html#cb467-11"></a>  <span class="kw">fluidRow</span>(</span>
<span id="cb467-12"><a href="image-classifier.html#cb467-12"></a>    <span class="kw">column</span>(</span>
<span id="cb467-13"><a href="image-classifier.html#cb467-13"></a>      <span class="dv">2</span>,</span>
<span id="cb467-14"><a href="image-classifier.html#cb467-14"></a>      <span class="kw">selectInput</span>(</span>
<span id="cb467-15"><a href="image-classifier.html#cb467-15"></a>        <span class="st">&quot;select&quot;</span>, <span class="st">&quot;Select an image to classify&quot;</span>,</span>
<span id="cb467-16"><a href="image-classifier.html#cb467-16"></a>        <span class="dt">choices =</span> <span class="kw">c</span>(<span class="st">&quot;lorikeet&quot;</span>, <span class="st">&quot;flamingo&quot;</span>)</span>
<span id="cb467-17"><a href="image-classifier.html#cb467-17"></a>      )</span>
<span id="cb467-18"><a href="image-classifier.html#cb467-18"></a>    ),</span>
<span id="cb467-19"><a href="image-classifier.html#cb467-19"></a>    <span class="kw">column</span>(</span>
<span id="cb467-20"><a href="image-classifier.html#cb467-20"></a>      <span class="dv">2</span>, <span class="kw">br</span>(), </span>
<span id="cb467-21"><a href="image-classifier.html#cb467-21"></a>      <span class="kw">actionButton</span>(</span>
<span id="cb467-22"><a href="image-classifier.html#cb467-22"></a>        <span class="st">&quot;classify&quot;</span>, <span class="st">&quot;Classify&quot;</span>, <span class="dt">icon =</span> <span class="kw">icon</span>(<span class="st">&quot;search&quot;</span>)</span>
<span id="cb467-23"><a href="image-classifier.html#cb467-23"></a>      )</span>
<span id="cb467-24"><a href="image-classifier.html#cb467-24"></a>    )</span>
<span id="cb467-25"><a href="image-classifier.html#cb467-25"></a>  ),</span>
<span id="cb467-26"><a href="image-classifier.html#cb467-26"></a>  <span class="kw">uiOutput</span>(<span class="st">&quot;img&quot;</span>)</span>
<span id="cb467-27"><a href="image-classifier.html#cb467-27"></a>)</span>
<span id="cb467-28"><a href="image-classifier.html#cb467-28"></a></span>
<span id="cb467-29"><a href="image-classifier.html#cb467-29"></a>server &lt;-<span class="st"> </span><span class="cf">function</span>(input, output, session){</span>
<span id="cb467-30"><a href="image-classifier.html#cb467-30"></a></span>
<span id="cb467-31"><a href="image-classifier.html#cb467-31"></a>  output<span class="op">$</span>img &lt;-<span class="st"> </span><span class="kw">renderUI</span>({</span>
<span id="cb467-32"><a href="image-classifier.html#cb467-32"></a>    path &lt;-<span class="st"> </span><span class="kw">paste0</span>(<span class="st">&quot;www/&quot;</span>, input<span class="op">$</span>select, <span class="st">&quot;.jpg&quot;</span>)</span>
<span id="cb467-33"><a href="image-classifier.html#cb467-33"></a>    tags<span class="op">$</span><span class="kw">img</span>(<span class="dt">src =</span> path, <span class="dt">id =</span> <span class="st">&quot;bird&quot;</span>)</span>
<span id="cb467-34"><a href="image-classifier.html#cb467-34"></a>  })</span>
<span id="cb467-35"><a href="image-classifier.html#cb467-35"></a></span>
<span id="cb467-36"><a href="image-classifier.html#cb467-36"></a>  <span class="kw">observeEvent</span>(input<span class="op">$</span>classify, {</span>
<span id="cb467-37"><a href="image-classifier.html#cb467-37"></a>    session<span class="op">$</span><span class="kw">sendCustomMessage</span>(<span class="st">&#39;classify&#39;</span>, <span class="kw">list</span>())</span>
<span id="cb467-38"><a href="image-classifier.html#cb467-38"></a>  })</span>
<span id="cb467-39"><a href="image-classifier.html#cb467-39"></a></span>
<span id="cb467-40"><a href="image-classifier.html#cb467-40"></a>}</span>
<span id="cb467-41"><a href="image-classifier.html#cb467-41"></a></span>
<span id="cb467-42"><a href="image-classifier.html#cb467-42"></a><span class="kw">shinyApp</span>(ui, server)</span></code></pre></div>
<div class="figure">
<img src="images/ml5-init.png" alt="" />
<p class="caption">Classifier skeleton</p>
</div>
</div>
<div id="javascript" class="section level2" number="22.3">
<h2><span class="header-section-number">22.3</span> JavaScript</h2>
<p>With this in place one can start thinking about the JavaScript, when the “classify” button is clicked the classification must be triggered in the client and the result sent back. To do so we need to define the message handler called “classify” to which the data is sent.</p>
<div class="sourceCode" id="cb468"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb468-1"><a href="image-classifier.html#cb468-1"></a><span class="co">// classify.js</span></span>
<span id="cb468-2"><a href="image-classifier.html#cb468-2"></a></span>
<span id="cb468-3"><a href="image-classifier.html#cb468-3"></a><span class="co">// Initialize </span></span>
<span id="cb468-4"><a href="image-classifier.html#cb468-4"></a><span class="kw">const</span> classifier <span class="op">=</span> ml5<span class="op">.</span><span class="fu">imageClassifier</span>(<span class="st">&#39;MobileNet&#39;</span><span class="op">,</span> modelLoaded)<span class="op">;</span></span>
<span id="cb468-5"><a href="image-classifier.html#cb468-5"></a></span>
<span id="cb468-6"><a href="image-classifier.html#cb468-6"></a><span class="kw">function</span> <span class="fu">modelLoaded</span>() {</span>
<span id="cb468-7"><a href="image-classifier.html#cb468-7"></a>  <span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(<span class="st">&#39;Model Loaded!&#39;</span>)<span class="op">;</span></span>
<span id="cb468-8"><a href="image-classifier.html#cb468-8"></a>}</span>
<span id="cb468-9"><a href="image-classifier.html#cb468-9"></a></span>
<span id="cb468-10"><a href="image-classifier.html#cb468-10"></a>Shiny<span class="op">.</span><span class="fu">addCustomMessageHandler</span>(<span class="st">&#39;classify&#39;</span><span class="op">,</span> <span class="kw">function</span>(data){</span>
<span id="cb468-11"><a href="image-classifier.html#cb468-11"></a>  <span class="co">// Make a prediction with a selected image</span></span>
<span id="cb468-12"><a href="image-classifier.html#cb468-12"></a>  classifier<span class="op">.</span><span class="fu">classify</span>(</span>
<span id="cb468-13"><a href="image-classifier.html#cb468-13"></a>    <span class="bu">document</span><span class="op">.</span><span class="fu">getElementById</span>(<span class="st">&quot;bird&quot;</span>)<span class="op">,</span> (err<span class="op">,</span> results) <span class="kw">=&gt;</span> {</span>
<span id="cb468-14"><a href="image-classifier.html#cb468-14"></a>      Shiny<span class="op">.</span><span class="fu">setInputValue</span>(<span class="st">&quot;classification&quot;</span><span class="op">,</span> results)<span class="op">;</span></span>
<span id="cb468-15"><a href="image-classifier.html#cb468-15"></a>    }</span>
<span id="cb468-16"><a href="image-classifier.html#cb468-16"></a>  )<span class="op">;</span></span>
<span id="cb468-17"><a href="image-classifier.html#cb468-17"></a>})<span class="op">;</span></span></code></pre></div>
<p>A few things to note on the above. The classifier is created outside of the message handler as this only has to be done once and not every time the “classify” button is clicked. While the message handler accepts the <code>data</code> objects it does not make use of it, which is fine, the argument must nonetheless be specified. In the aforementioned callback function the input “classification” is defined.</p>
</div>
<div id="input-handler" class="section level2" number="22.4">
<h2><span class="header-section-number">22.4</span> Input Handler</h2>
<p>We can then proceed to running the shiny application and observe the classifier in action.</p>
<div class="sourceCode" id="cb469"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb469-1"><a href="image-classifier.html#cb469-1"></a><span class="kw">library</span>(<span class="st">&quot;shiny&quot;</span>)</span>
<span id="cb469-2"><a href="image-classifier.html#cb469-2"></a></span>
<span id="cb469-3"><a href="image-classifier.html#cb469-3"></a><span class="kw">addResourcePath</span>(<span class="st">&quot;www&quot;</span>, <span class="st">&quot;www&quot;</span>)</span>
<span id="cb469-4"><a href="image-classifier.html#cb469-4"></a></span>
<span id="cb469-5"><a href="image-classifier.html#cb469-5"></a>ui &lt;-<span class="st"> </span><span class="kw">fluidPage</span>(</span>
<span id="cb469-6"><a href="image-classifier.html#cb469-6"></a>  tags<span class="op">$</span><span class="kw">head</span>(</span>
<span id="cb469-7"><a href="image-classifier.html#cb469-7"></a>    tags<span class="op">$</span><span class="kw">script</span>(</span>
<span id="cb469-8"><a href="image-classifier.html#cb469-8"></a>      <span class="dt">src =</span> <span class="st">&quot;https://unpkg.com/ml5@0.4.3/dist/ml5.min.js&quot;</span></span>
<span id="cb469-9"><a href="image-classifier.html#cb469-9"></a>    ),</span>
<span id="cb469-10"><a href="image-classifier.html#cb469-10"></a>    tags<span class="op">$</span><span class="kw">script</span>(<span class="dt">src =</span> <span class="st">&quot;www/classify.js&quot;</span>)</span>
<span id="cb469-11"><a href="image-classifier.html#cb469-11"></a>  ),</span>
<span id="cb469-12"><a href="image-classifier.html#cb469-12"></a>  <span class="kw">fluidRow</span>(</span>
<span id="cb469-13"><a href="image-classifier.html#cb469-13"></a>    <span class="kw">column</span>(</span>
<span id="cb469-14"><a href="image-classifier.html#cb469-14"></a>      <span class="dv">2</span>,</span>
<span id="cb469-15"><a href="image-classifier.html#cb469-15"></a>      <span class="kw">selectInput</span>(</span>
<span id="cb469-16"><a href="image-classifier.html#cb469-16"></a>        <span class="st">&quot;select&quot;</span>, <span class="st">&quot;Select an image to classify&quot;</span>,</span>
<span id="cb469-17"><a href="image-classifier.html#cb469-17"></a>        <span class="dt">choices =</span> <span class="kw">c</span>(<span class="st">&quot;lorikeet&quot;</span>, <span class="st">&quot;flamingo&quot;</span>)</span>
<span id="cb469-18"><a href="image-classifier.html#cb469-18"></a>      )</span>
<span id="cb469-19"><a href="image-classifier.html#cb469-19"></a>    ),</span>
<span id="cb469-20"><a href="image-classifier.html#cb469-20"></a>    <span class="kw">column</span>(</span>
<span id="cb469-21"><a href="image-classifier.html#cb469-21"></a>      <span class="dv">2</span>, <span class="kw">br</span>(), </span>
<span id="cb469-22"><a href="image-classifier.html#cb469-22"></a>      <span class="kw">actionButton</span>(</span>
<span id="cb469-23"><a href="image-classifier.html#cb469-23"></a>        <span class="st">&quot;classify&quot;</span>, <span class="st">&quot;Classify&quot;</span>, <span class="dt">icon =</span> <span class="kw">icon</span>(<span class="st">&quot;search&quot;</span>)</span>
<span id="cb469-24"><a href="image-classifier.html#cb469-24"></a>      )</span>
<span id="cb469-25"><a href="image-classifier.html#cb469-25"></a>    )</span>
<span id="cb469-26"><a href="image-classifier.html#cb469-26"></a>  ),</span>
<span id="cb469-27"><a href="image-classifier.html#cb469-27"></a>  <span class="kw">uiOutput</span>(<span class="st">&quot;img&quot;</span>),</span>
<span id="cb469-28"><a href="image-classifier.html#cb469-28"></a>  <span class="kw">verbatimTextOutput</span>(<span class="st">&quot;results&quot;</span>) <span class="co"># print output</span></span>
<span id="cb469-29"><a href="image-classifier.html#cb469-29"></a>)</span>
<span id="cb469-30"><a href="image-classifier.html#cb469-30"></a></span>
<span id="cb469-31"><a href="image-classifier.html#cb469-31"></a>server &lt;-<span class="st"> </span><span class="cf">function</span>(input, output, session){</span>
<span id="cb469-32"><a href="image-classifier.html#cb469-32"></a></span>
<span id="cb469-33"><a href="image-classifier.html#cb469-33"></a>  output<span class="op">$</span>img &lt;-<span class="st"> </span><span class="kw">renderUI</span>({</span>
<span id="cb469-34"><a href="image-classifier.html#cb469-34"></a>    path &lt;-<span class="st"> </span><span class="kw">paste0</span>(<span class="st">&quot;www/&quot;</span>, input<span class="op">$</span>select, <span class="st">&quot;.jpg&quot;</span>)</span>
<span id="cb469-35"><a href="image-classifier.html#cb469-35"></a>    tags<span class="op">$</span><span class="kw">img</span>(<span class="dt">src =</span> path, <span class="dt">id =</span> <span class="st">&quot;bird&quot;</span>)</span>
<span id="cb469-36"><a href="image-classifier.html#cb469-36"></a>  })</span>
<span id="cb469-37"><a href="image-classifier.html#cb469-37"></a></span>
<span id="cb469-38"><a href="image-classifier.html#cb469-38"></a>  <span class="kw">observeEvent</span>(input<span class="op">$</span>classify, {</span>
<span id="cb469-39"><a href="image-classifier.html#cb469-39"></a>    session<span class="op">$</span><span class="kw">sendCustomMessage</span>(<span class="st">&#39;classify&#39;</span>, <span class="kw">list</span>())</span>
<span id="cb469-40"><a href="image-classifier.html#cb469-40"></a>  })</span>
<span id="cb469-41"><a href="image-classifier.html#cb469-41"></a></span>
<span id="cb469-42"><a href="image-classifier.html#cb469-42"></a>  <span class="co"># render classification</span></span>
<span id="cb469-43"><a href="image-classifier.html#cb469-43"></a>  output<span class="op">$</span>results &lt;-<span class="st"> </span><span class="kw">renderPrint</span>({</span>
<span id="cb469-44"><a href="image-classifier.html#cb469-44"></a>    input<span class="op">$</span>classification</span>
<span id="cb469-45"><a href="image-classifier.html#cb469-45"></a>  })</span>
<span id="cb469-46"><a href="image-classifier.html#cb469-46"></a></span>
<span id="cb469-47"><a href="image-classifier.html#cb469-47"></a>}</span>
<span id="cb469-48"><a href="image-classifier.html#cb469-48"></a></span>
<span id="cb469-49"><a href="image-classifier.html#cb469-49"></a><span class="kw">shinyApp</span>(ui, server)</span></code></pre></div>
<div class="figure">
<img src="images/ml5-output.png" alt="" />
<p class="caption">Classifier output</p>
</div>
<p>This returns three results, the label (classification) and the confidence, which could be improved, we ought to build an input handler to transform that into a readable table. Below we add the input handler and register it with shiny. Do not forget to use it in the message handler in JavaScript like so: <code>Shiny.setInputValue("classification:class", results);</code>.</p>
<div class="sourceCode" id="cb470"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb470-1"><a href="image-classifier.html#cb470-1"></a><span class="kw">library</span>(<span class="st">&quot;shiny&quot;</span>)</span>
<span id="cb470-2"><a href="image-classifier.html#cb470-2"></a></span>
<span id="cb470-3"><a href="image-classifier.html#cb470-3"></a><span class="kw">addResourcePath</span>(<span class="st">&quot;www&quot;</span>, <span class="st">&quot;www&quot;</span>)</span>
<span id="cb470-4"><a href="image-classifier.html#cb470-4"></a></span>
<span id="cb470-5"><a href="image-classifier.html#cb470-5"></a><span class="co"># create handler</span></span>
<span id="cb470-6"><a href="image-classifier.html#cb470-6"></a>handler &lt;-<span class="st"> </span><span class="cf">function</span>(data, ...){</span>
<span id="cb470-7"><a href="image-classifier.html#cb470-7"></a>  purrr<span class="op">::</span><span class="kw">map_dfr</span>(data, as.data.frame)</span>
<span id="cb470-8"><a href="image-classifier.html#cb470-8"></a>}</span>
<span id="cb470-9"><a href="image-classifier.html#cb470-9"></a></span>
<span id="cb470-10"><a href="image-classifier.html#cb470-10"></a><span class="co"># register handler</span></span>
<span id="cb470-11"><a href="image-classifier.html#cb470-11"></a>shiny<span class="op">::</span><span class="kw">registerInputHandler</span>(<span class="st">&quot;class&quot;</span>, handler)</span>
<span id="cb470-12"><a href="image-classifier.html#cb470-12"></a></span>
<span id="cb470-13"><a href="image-classifier.html#cb470-13"></a>ui &lt;-<span class="st"> </span><span class="kw">fluidPage</span>(</span>
<span id="cb470-14"><a href="image-classifier.html#cb470-14"></a>  tags<span class="op">$</span><span class="kw">head</span>(</span>
<span id="cb470-15"><a href="image-classifier.html#cb470-15"></a>    tags<span class="op">$</span><span class="kw">script</span>(</span>
<span id="cb470-16"><a href="image-classifier.html#cb470-16"></a>      <span class="dt">src =</span> <span class="st">&quot;https://unpkg.com/ml5@0.4.3/dist/ml5.min.js&quot;</span></span>
<span id="cb470-17"><a href="image-classifier.html#cb470-17"></a>    ),</span>
<span id="cb470-18"><a href="image-classifier.html#cb470-18"></a>    tags<span class="op">$</span><span class="kw">script</span>(<span class="dt">src =</span> <span class="st">&quot;www/classify.js&quot;</span>)</span>
<span id="cb470-19"><a href="image-classifier.html#cb470-19"></a>  ),</span>
<span id="cb470-20"><a href="image-classifier.html#cb470-20"></a>  <span class="kw">fluidRow</span>(</span>
<span id="cb470-21"><a href="image-classifier.html#cb470-21"></a>    <span class="kw">column</span>(</span>
<span id="cb470-22"><a href="image-classifier.html#cb470-22"></a>      <span class="dv">2</span>,</span>
<span id="cb470-23"><a href="image-classifier.html#cb470-23"></a>      <span class="kw">selectInput</span>(</span>
<span id="cb470-24"><a href="image-classifier.html#cb470-24"></a>        <span class="st">&quot;select&quot;</span>, <span class="st">&quot;Select an image to classify&quot;</span>,</span>
<span id="cb470-25"><a href="image-classifier.html#cb470-25"></a>        <span class="dt">choices =</span> <span class="kw">c</span>(<span class="st">&quot;lorikeet&quot;</span>, <span class="st">&quot;flamingo&quot;</span>)</span>
<span id="cb470-26"><a href="image-classifier.html#cb470-26"></a>      )</span>
<span id="cb470-27"><a href="image-classifier.html#cb470-27"></a>    ),</span>
<span id="cb470-28"><a href="image-classifier.html#cb470-28"></a>    <span class="kw">column</span>(</span>
<span id="cb470-29"><a href="image-classifier.html#cb470-29"></a>      <span class="dv">2</span>, <span class="kw">br</span>(), </span>
<span id="cb470-30"><a href="image-classifier.html#cb470-30"></a>      <span class="kw">actionButton</span>(</span>
<span id="cb470-31"><a href="image-classifier.html#cb470-31"></a>        <span class="st">&quot;classify&quot;</span>, <span class="st">&quot;Classify&quot;</span>, <span class="dt">icon =</span> <span class="kw">icon</span>(<span class="st">&quot;search&quot;</span>)</span>
<span id="cb470-32"><a href="image-classifier.html#cb470-32"></a>      )</span>
<span id="cb470-33"><a href="image-classifier.html#cb470-33"></a>    )</span>
<span id="cb470-34"><a href="image-classifier.html#cb470-34"></a>  ),</span>
<span id="cb470-35"><a href="image-classifier.html#cb470-35"></a>  <span class="kw">uiOutput</span>(<span class="st">&quot;img&quot;</span>),</span>
<span id="cb470-36"><a href="image-classifier.html#cb470-36"></a>  <span class="kw">verbatimTextOutput</span>(<span class="st">&quot;results&quot;</span>)</span>
<span id="cb470-37"><a href="image-classifier.html#cb470-37"></a>)</span>
<span id="cb470-38"><a href="image-classifier.html#cb470-38"></a></span>
<span id="cb470-39"><a href="image-classifier.html#cb470-39"></a>server &lt;-<span class="st"> </span><span class="cf">function</span>(input, output, session){</span>
<span id="cb470-40"><a href="image-classifier.html#cb470-40"></a></span>
<span id="cb470-41"><a href="image-classifier.html#cb470-41"></a>  output<span class="op">$</span>img &lt;-<span class="st"> </span><span class="kw">renderUI</span>({</span>
<span id="cb470-42"><a href="image-classifier.html#cb470-42"></a>    path &lt;-<span class="st"> </span><span class="kw">paste0</span>(<span class="st">&quot;www/&quot;</span>, input<span class="op">$</span>select, <span class="st">&quot;.jpg&quot;</span>)</span>
<span id="cb470-43"><a href="image-classifier.html#cb470-43"></a>    tags<span class="op">$</span><span class="kw">img</span>(<span class="dt">src =</span> path, <span class="dt">id =</span> <span class="st">&quot;bird&quot;</span>)</span>
<span id="cb470-44"><a href="image-classifier.html#cb470-44"></a>  })</span>
<span id="cb470-45"><a href="image-classifier.html#cb470-45"></a></span>
<span id="cb470-46"><a href="image-classifier.html#cb470-46"></a>  <span class="kw">observeEvent</span>(input<span class="op">$</span>classify, {</span>
<span id="cb470-47"><a href="image-classifier.html#cb470-47"></a>    session<span class="op">$</span><span class="kw">sendCustomMessage</span>(<span class="st">&#39;classify&#39;</span>, <span class="kw">list</span>())</span>
<span id="cb470-48"><a href="image-classifier.html#cb470-48"></a>  })</span>
<span id="cb470-49"><a href="image-classifier.html#cb470-49"></a></span>
<span id="cb470-50"><a href="image-classifier.html#cb470-50"></a>  output<span class="op">$</span>results &lt;-<span class="st"> </span><span class="kw">renderPrint</span>({</span>
<span id="cb470-51"><a href="image-classifier.html#cb470-51"></a>    input<span class="op">$</span>classification</span>
<span id="cb470-52"><a href="image-classifier.html#cb470-52"></a>  })</span>
<span id="cb470-53"><a href="image-classifier.html#cb470-53"></a></span>
<span id="cb470-54"><a href="image-classifier.html#cb470-54"></a>}</span>
<span id="cb470-55"><a href="image-classifier.html#cb470-55"></a></span>
<span id="cb470-56"><a href="image-classifier.html#cb470-56"></a><span class="kw">shinyApp</span>(ui, server)</span></code></pre></div>
<div class="figure">
<img src="images/ml5-table.png" alt="" />
<p class="caption">Classifier table output</p>
</div>

</div>
</div>
            </section>

          </div>
        </div>
      </div>
<a href="exercise-machine-learning.html" class="navigation navigation-prev " aria-label="Previous page"><i class="fa fa-angle-left"></i></a>
<a href="progress-bar.html" class="navigation navigation-next " aria-label="Next page"><i class="fa fa-angle-right"></i></a>
    </div>
  </div>
<script src="libs/gitbook/js/app.min.js"></script>
<script src="libs/gitbook/js/lunr.js"></script>
<script src="libs/gitbook/js/clipboard.min.js"></script>
<script src="libs/gitbook/js/plugin-search.js"></script>
<script src="libs/gitbook/js/plugin-sharing.js"></script>
<script src="libs/gitbook/js/plugin-fontsettings.js"></script>
<script src="libs/gitbook/js/plugin-bookdown.js"></script>
<script src="libs/gitbook/js/jquery.highlight.js"></script>
<script src="libs/gitbook/js/plugin-clipboard.js"></script>
<script>
gitbook.require(["gitbook"], function(gitbook) {
gitbook.start({
"sharing": {
"github": true,
"facebook": false,
"twitter": false,
"linkedin": false,
"weibo": false,
"instapaper": false,
"vk": false,
"all": {}
},
"fontsettings": {
"theme": "white",
"family": "sans",
"size": 2
},
"edit": {
"link": "https://github.com/JohnCoene/javascript-for-r/edit/master/7-31-examples-ml5.Rmd",
"text": "Edit"
},
"history": {
"link": null,
"text": null
},
"view": {
"link": null,
"text": null
},
"download": {},
"toc": {
"collapse": "section"
}
});
});
</script>

</body>

</html>
